<link rel="stylesheet" type="text/css" href="__CSS__/sixiangxian.css" />

{include file="index/canvas_structure" /}


<!--<div style="margin-left: 220px;float: left;"><text>目标：
    {if condition="strlen($purpose) == 0"}
    (目标未定义)
    {else/}
    {$purpose}
    {/if}
    </text></div>
<button onclick="$('#change_purpose').show();$('#cover').css('display','block');
            $('#cover').css('height','100%');" style="margin-left: 15px;">更改目标</button>


<div id="cover" class="cover"></div>

<div id="change_purpose" class="showdiv" style="display: none;">
    <div class="showdiv_title" >
        更改目标
    </div>
    <!-- 内容
    <div class="showdiv_prompt">

        <form  onsubmit="return checkChangePurpose()" action="{:url('index/changeSixiangxianPurpose')}" method="post" style="margin-left: 20px;">
            请输入新的目标：
            <input type="text" name="newPurpose" id="new_purpose"/>

            <div id="invalid_name" style="display: none;color: red;font-size: 13px;">项目名称不能为空或空格</div>
            <input type="hidden" name="toolId" value="{$toolId}"/>

            <br>
            <button class="button button-small " onclick="$('#change_purpose').hide();
                $('#cover').css('display','none');" style="margin:20px auto 10px 25%;" >
                取消</button>
            <button type="submit" id="next_step_btn"  class="button button-action button-pill" style="margin-left: 10px;margin-bottom: 10px">
                确定</button>
        </form>
    </div>
</div>
-->

<!--
<div style="margin-left: 20px">
   <text>x轴：{//$xAxis}；</text>
    <text>y轴：{//$yAxis}</text>
</div>-->

<!--四象限图类别右边浮窗-->
<div style="position:fixed;z-index:99;right: 0%;top: 40%;width: 12%;border: 3px ridge;background-color: rgba(111,177,223,0.34);height: 250px;">
        {if condition="$sixiangxian_type==''"}
        <div id="changeUserSpan" style="font-size: 15px;">首次进入，请选择一个类别（选择后不可以更改）</div>


        <button onclick="location.href='{:url('index/changeSixiangxianType',array('toolId'=>$toolId, 'type'=> '可行性——价值'))}'">选择"可行性——价值"</button>
        <button onclick="location.href='{:url('index/changeSixiangxianType',array('toolId'=>$toolId,'type'=>'紧急度——重要性'))}'">选择"紧急度——重要性"</button>


        {else/}
        <div>类别：{$sixiangxian_type}</div>

        {if condition="$sixiangxian_type=='可行性——价值'"}
        <br>
            <img  src="__IMG__/sixiangxian/navigation1.png" style="width: 100%;">
        {/if}

        {if condition="$sixiangxian_type=='紧急度——重要性'"}
        <br>
            <img  src="__IMG__/sixiangxian/navigation2.png" style="width: 100%;">
        {/if}
        {/if}

</div>


<div style="position:relative;width: 100%;text-align: center;font-size: 30px;">
    <div style="width: 130px;position: relative;margin-left: 45%;">
        四象限法

        <div class="tooltip" style="width: 24px;height: 24px;position: absolute;top: 0%;left: 100%;">

            <img style="width: 24px;height: 24px;position: absolute;top: 0%;left: 0%;" src="__IMG__/explaination.png">

            <span class="tooltiptext" style="text-align:left;font-size: 14px;">
                {if condition="$sixiangxian_type=='可行性——价值'"}
                    用于从“可行性”与“价值”维度评估想法，帮助我们在众多想法中决策出当前可行性高&价值高的。
                {else/}
                    用于从“重要性”与“紧急程度”维度评估想法，帮助我们为众多想法排序，重要&紧急的要立即搞定；重要&不紧急的要制定计划、稳步推进。
                {/if}

            </span>
        </div>

    </div>
</div>


<div style="font-size: 18px;margin-left: 45px;">
    <text class="title">
        <b>STEP1：<text style="color: red;">*</text>请输入需要解决的问题→</b>
    </text>

    <div class="tooltip" style="width: 844px;float: none;">
        <input id="newPurpose" class="extraInfoInput" oninput="
            var data = new Object();
            data.toolId = '{$toolId}';
            data.info =$(this).val();
            data.type = 'changePurpose';
            ws.send(JSON.stringify(data));"
               value="{$purpose}" maxlength="100" placeholder="(点击此处输入问题)"  style="font-size:15px;background:inherit;border: none;border-bottom: 1px solid lightgray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;"/>

        <div class="tooltiptext" style="">修改需要解决的问题</div>
    </div>
</div>



<!--无分类初始便利贴part-->
<div style="display:table;width:380px;min-height:200px;margin-left: 45px;margin-top: 10px;clear: both;float: left;">

    <div class="typeBlock" style="" ondrop="event.preventDefault();" >
        <div class="title" style="font-size: 18px;">
            <text><b>STEP2：创建想法</b></text>



                {in name="$_COOKIE['user']" value="$prjInfo['ready_user_ids']"}
                <div id="ready_btn" class="button-small button-action  " style="float:right;cursor: pointer;width: max-content;font-size: 16px;" onclick="
                    if($(this).text() == '我已完成'){
                        updateToolReady();
                        $(this).html('取消准备');
                    }else{
                        cancelToolReady();
                        $(this).html('我已完成');
                    }">取消准备</div>
                {/in}


                {notin name="$_COOKIE['user']" value="$prjInfo['ready_user_ids']"}
                <div id="ready_btn" class="button-small button-action" style="float:right;cursor: pointer;width: max-content;font-size: 16px;" onclick="
                    if($(this).text() == '我已完成'){
                        updateToolReady();
                        $(this).html('取消准备');
                    }else{
                        cancelToolReady();
                        $(this).html('我已完成');
                    }">我已完成</div>
                {/notin}

        </div>


        <div id="step3_prompt" style="display:none;float: right;margin-top:50px;border: dotted;">开始拖动想法吧→→→→→</div>



        <div class="msg"  id="msg_0" style="display: block;width: 100%">
            {volist name="records" id="r"}

            {if condition="$r.type_id == 0"}

            {include file="index/business_canvas_template" /}

            {/if}
            {/volist}

        </div>

                <button style="position:relative;width: 300px;height: 100px;font-size: 16px;margin:50px 0 0 30px;border-color:#D9D9D9;padding:0;" class="addBtn button button-border" onclick="addRecord('{$toolId}',0,'{$_COOKIE['user']}')"><!--type为0-->
                    <!--<img src="__IMG__/add_record.png">-->

                    <div style="position:absolute;top:15%;left: 40%;height: 70px;width: 70px;" class="add_prj"></div>
                </button>


    </div>
</div>




<!--STEP3标题和准备信息-->
<div style="background-color: #f2f2f2;width:760px;margin-left: 470px;">
<div class="title" style="font-size:18px;width: 760px;margin-top: 10px;">
    <text><b>STEP3：待所有成员创建完成STEP2后，象限开启，可拖动想法到下面的象限中</b></text>


    <!--
    {if condition="$_COOKIE['user'] == $prjInfo['creator_id']"}
    <button onclick="$('#cover_1').hide();" class="button button-small button-action" style="height: 100%;float: right;font-size: 16px;">
        创建完成
    </button>
    <text style="font-size: 15px;font-weight: 100;float: right;margin-right: 10px;color: red;">
        请确认所有成员完成STEP2后再点击
    </text>
    {/if}-->

</div>


<!--ready信息展示part-->
<div id="ready_banner" style="height:45px;width: 760px;">
    {volist name="$prjMembers" id="p"}
    <div style="float: left;margin-right: 50px;">

        <!--用户名太长取前4个字-->
        {if condition="iconv_strlen($p.usr_name) > 4"}
            <p style="font-size: 16px;">{:iconv_substr($p.usr_name,0,4)."..."}</p>
        {else/}
            <p style="font-size: 16px;">{$p.usr_name}</p>
        {/if}


        {notin name="$p.id" value="$prjInfo['ready_user_ids']"}
            <div id="ready_info_{$p.id}" style="font-size: 13px;color: #4d4d4d;">准备中......</div>
        {/notin}

        {in name="$p.id" value="$prjInfo['ready_user_ids']"}
            <div id="ready_info_{$p.id}" style="font-size: 13px;color: #4d4d4d;">准备好了！</div>
        {/in}

    </div>
    {/volist}
</div>


<script type="module">
    var ready_banner_vm = new Vue({
        el: '#ready_banner',
        data: {

        },
        computed: {

        },
        methods: {

        }
    });

</script>


</div>

<!--两个table的合并div-->
<div style="position: relative;width: 760px;margin-left: 470px;">


    <!-- 遮罩层 -->
    <div id="cover_1" class="cover" style="z-index:100;position:absolute;cursor:not-allowed;background:#fff;opacity:0.6;height: 100%;display: block;">

    </div>

    <!--table-->
    <div style="display:table;width:760px;min-height:200px;">

    {volist name="types" id="t" offset="0" length="2"}

    <div class="typeBlock" id="typeBlock_{$t.id}"  ondrop="drop(event)" ondragover="allowDrop(event)">
        <div class="title" style="background-color: white;text-align: center;">
            <text>{$t.type_name}</text>
            <!--<div class="tooltip ">
                <div class="addBtn" onclick="addRecord('{$toolId}','{$t.id}','{$_COOKIE['user']}')">
                    <img src="__IMG__/add_record.png">
                </div>

                <!--<span class="tooltiptext">。。。
                </span>

            </div>-->

        </div>


        <div class="msg" id="msg_{$t.id}" style="width: 100%;">
            {volist name="records" id="r"}

            {if condition="$r.type_name == $t.type_name "}

            {include file="index/business_canvas_template" /}

            {/if}
            {/volist}

        </div>
    </div>

    {/volist}
</div>


    <div style="display:table;width:760px;min-height:200px;">

    {volist name="types" id="t" offset="2" length="2"}

    <div class="typeBlock" id="typeBlock_{$t.id}"  ondrop="drop(event)" ondragover="allowDrop(event)">
        <div class="title" style="background-color: white;text-align: center;">
            <text>{$t.type_name}</text>
            <!--<div class="tooltip ">
                <div class="addBtn" onclick="addRecord('{$toolId}','{$t.id}','{$_COOKIE['user']}')">
                    <img src="__IMG__/add_record.png">
                </div>


                <!--<span class="tooltiptext">。。。
                </span>

            </div>-->

        </div>


        <div class="msg" id="msg_{$t.id}" style="width: 100%;">
            {volist name="records" id="r"}

            {if condition="$r.type_name == $t.type_name "}

                {include file="index/business_canvas_template" /}

            {/if}
            {/volist}

        </div>
    </div>

    {/volist}
</div>



</div>

</div><!--closing tag for wholeCanvas div-->

<script>
    /*var allText = $(".record_area");
    var allMsgs = $(".oneMsg");

    for(var i=0; i < allMsgs.length; i++) {
        var color_id = allText[i].id.split('_')[1];

        allMsgs[i].innerHTML += '<div id="color_panel_'+ color_id +'" style="display:none;float:left;margin-top:2px;width: 200px;height: 40px;">'+
        '<div onclick="changeTextareaColor(this)" value="grey" style="background-color: grey;float: left;width: 40px;height: 40px;"></div> '+
        '<div onclick="changeTextareaColor(this)" style="background-color: lightcyan;float: left;width: 40px;height: 40px;"></div> '+
        '</div>' ;
    }
    //调用textarea自适应函数，重新取一下allText*/


    setTimeout(function () {
        var allText = $(".record_area");

        //console.log(allText);
        for (var i = 0; i < allText.length; i++) {
            autoTextarea(allText[i]);// 调用
        }
    }, 0);



    //点击除输入框以外的任意位置，更改目标
    var oldPurpose = '{$purpose}';
    $(document).click(function(e){
        var _con = $('#newPurpose');   // 设置目标区域
        var newPurpose = $('#newPurpose').val();
        var toolId = '{$toolId}';

        if(!_con.is(e.target) && _con.has(e.target).length === 0){
            if(newPurpose != oldPurpose) {

                $.ajax({
                    type: "POST",
                    url: "__PUBLIC__/index/index/changeSixiangxianPurpose",
                    data: {
                        toolId: toolId,
                        newPurpose: newPurpose
                    },
                    success: function (result) {
                        oldPurpose = newPurpose;

                        toastr.info('问题修改已自动保存~');
                        setTimeout(function () {
                            toastr.clear();
                        }, 4000);
                        //console.log(result);
                        //window.location.reload();
                    }
                });
            }
        }
    });


    //判断是否所有人都准备好了，可以进行STEP 3
    var memberSize = JSON.parse('{:json_encode($prjMembers)}').length;
    var readyMemSize = 0;

    if( "{$prjInfo['ready_user_ids']}".length > 0){//否则split过后长度为 1
        readyMemSize = "{$prjInfo['ready_user_ids']}".split(',').length;
    }

    isEveryoneReady();

    function updateToolReady() {
        $.ajax({
            type: "POST",
            url: "__PUBLIC__/index/index/updateToolReady",
            data: {

                userId: "{$_COOKIE['user']}",
                toolId: '{$toolId}'
            },
            success: function (result) {
                //console.log(result);
                //window.location.reload();
                $("#ready_info_{$_COOKIE['user']}").html("准备好了！");

                readyMemSize ++;
                isEveryoneReady();

                var data = new Object();
                data.userId = "{$_COOKIE['user']}";
                data.toolId ='{$toolId}';
                data.type = "ready";

                ws.send(JSON.stringify(data));
            }
        });
    }

    function cancelToolReady() {
        $.ajax({
            type: "POST",
            url: "__PUBLIC__/index/index/cancelToolReady",
            data: {
                userId: "{$_COOKIE['user']}",
                toolId: '{$toolId}'
            },
            success: function (result) {
                //console.log(result);
                //window.location.reload();

                $("#ready_info_{$_COOKIE['user']}").html("准备中......");
                readyMemSize --;

                var data = new Object();
                data.userId = "{$_COOKIE['user']}";
                data.toolId ='{$toolId}';
                data.type = "notReady";

                ws.send(JSON.stringify(data));
            }
        });
    }




    function isEveryoneReady() {


        //console.log(members + "  "+readyMems);


        if(memberSize == readyMemSize){
            $('#cover_1').hide();
            $("#ready_btn").hide();

            $('#step3_prompt').show();
            return true;
        }else{
            $('#cover_1').show();
            $("#ready_btn").show();

            $('#step3_prompt').hide();
            return false;
        }
    }
</script>
